<template>
	<view>
		<div class="place-info">
			<div class="place-info-pic">
				<image :src="data.photo" mode="aspectFill"></image>
			</div>
			<div class="place-info-name">
				{{data.name}}
			</div>
		</div>
		<div class="place-box">
			<div class="place-box-i">
				<div class="place-box-top">
					{{todaynum}}次
				</div>
				<div class="place-box-bottom">
					今日消毒
				</div>
			</div>
			<div class="place-box-i">
				<div class="place-box-top">
					{{data.list.length}}次
				</div>
				<div class="place-box-bottom">
					总消毒
				</div>
			</div>
			<div class="place-box-i">
				<div class="place-box-top">
					{{score}}
				</div>
				<div class="place-box-bottom">
					评分
				</div>
			</div>
		</div>
		<div class="zw" style="height: 140rpx;"></div>
		
		<div class="msg">
			{{msg}}
		</div>
		
		<div class="xdlist">
				<div class="xdlist-i" v-for="(item,index) in data.list" :key='item.picurl'>
					<div class="xdlist-l">
						<div class="time-x"></div>
						<div class="time-y"></div>
					</div>
					<div class="xdlist-r">
						<div class="time">时间:{{dateFormat("YYYY年mm月dd日 HH:MM",item.time)}}</div>
						<div class="username">消毒人:{{item.username}}</div>
						<div class="pic" >
							<image :src="item.picurl" mode="aspectFill" @click="picshow(index)"></image>
						</div>
					</div>
					
				</div>
		</div>
		
	</view>
</template>

<script>
	const db = wx.cloud.database()
	let _that
	export default {
		data() {
			return {
				data:{
					
				},
				todaynum:0,
				score:0,
				msg:''
			}
		},
		methods: {
			picshow(a){
				console.log(a)
				let picarr=this.data.list.map(item=>{
					return item.picurl
				})
				
				uni.previewImage({
				     urls: picarr,
					 current:a
				})
			},
			dateFormat(fmt, date) {
				
				date=new Date(date)
			    let ret;
			    const opt = {
			        "Y+": date.getFullYear().toString(),        // 年
			        "m+": (date.getMonth() + 1).toString(),     // 月
			        "d+": date.getDate().toString(),            // 日
			        "H+": date.getHours().toString(),           // 时
			        "M+": date.getMinutes().toString(),         // 分
			        "S+": date.getSeconds().toString()          // 秒
			        // 有其他格式化字符需求可以继续添加，必须转化成字符串
			    };
			    for (let k in opt) {
			        ret = new RegExp("(" + k + ")").exec(fmt);
			        if (ret) {
			            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
			        };
			    };
			    return fmt;
			}
		},onLoad(a) {
			console.log(a)
			_that=this
			db.collection('place').where({
				_id:a.id
			}).get().then((res)=>{
				_that.data=res.data[0]
				let nowdate=_that.dateFormat('YYYY-mm-dd',new Date())
				let num=0
				for (let i = 0; i < _that.data.list.length; i++) {
					if(nowdate==_that.dateFormat('YYYY-mm-dd',_that.data.list[i].time)){
						num++
					}else{
						break;
					}
				}
				console.log(num)
				_that.todaynum=num
				
				if(_that.data.list.length==0){
					_that.score=0
					
				}else{
					let alltime= (new Date().getTime()- _that.data.list[_that.data.list.length-1].time)/_that.data.list.length
					let pj=alltime/3600000
					
					console.log('平均')
					
					if(pj<=8){
						_that.score=5.0
					}else if(pj>8&&pj<=13){
						_that.score=(5-(pj-8)/2).toFixed(1)
					}else{
						_that.score=5-(pj-8)/2
						if(_that.score<1){
							_that.score=1.0
						}
					}
					
					
					 let sc=(new Date().getTime()-_that.data.list[0].time)/3600000
					 
					 
					 if(sc>12&& _that.dateFormat('HH',_that.data.list[0].time)>5){
						 console.log('一夜过去了 快去打扫吧')
						 _that.msg='一夜过去了 快去准备消毒吧 夜间病毒容易滋生，有条件的建议夜间紫外线杀毒'
						 
					 }else if(sc>8){
						console.log('已经'+parseInt(sc)+'没有打扫过了')
						 _that.msg='已经'+parseInt(sc)+'没有消毒了 建议立即进行消毒'
					 }else{
						 console.log('保持的很好')
						  _that.msg='保持的不错 建议在'+parseInt(8-sc)+'小时内再次消毒'
					 }
					
					
				}
				
				
				
				
				
			})
			
		}
		
	}
</script>

<style lang="stylus">
	.msg
		text-align center
		width 690rpx
		background-color #F0AD4E
		color #FFFFFF
		line-height 60rpx
		margin 30rpx auto
		margin-top 0rpx
		border-radius 10rpx
		padding 0 60rpx
		box-sizing border-box
	.xdlist
		color #333333
		.xdlist-i
			
			display flex
			flex-direction row
			.xdlist-l
				width 260rpx
				position relative
				.time-x
					height 100%
					width 4rpx
					background-color #999999
					margin-left 140rpx
				.time-y
					height 40rpx
					width 40rpx
					border-radius 50%
					background-color #808080
					position absolute
					top 0rpx
					left 122rpx
			.xdlist-r
				padding-top 20rpx
				padding-bottom 20rpx
				flex 1
				line-height 2em
				.pic
					height 200rpx
					width 360rpx
					image
						height 100%
						width 100%
				.time
					font-size 24rpx
				.username
					padding-bottom 20rpx
				
	.place-box
		position absolute
		left 30rpx
		width 690rpx
		background-color #FFFFFF
		box-shadow:0px 2rpx 8rpx 0px rgba(0, 0, 0, 0.12);
		height 200rpx
		border-radius 20rpx
		overflow hidden
		transform translateY(-100rpx)
		box-sizing border-box
		display flex
		flex-direction row
		.place-box-i
			flex 1
			text-align center
			.place-box-top
				color rgba(210,63,63,1)
				font-size 48rpx
				margin-top 40rpx
				margin-bottom 30rpx
			.place-box-bottom
				color rgba(128,128,128,1)
				font-size 26rpx
				
	.place-info
		height 500rpx
		background-color #014A99
		color #FFFFFF
		text-align center
		display flex
		flex-direction column
		align-items center
		.place-info-pic
			width 200rpx
			height 200rpx
			border 6rpx solid #FFFFFF;
			margin-top 40rpx
			margin-bottom 40rpx
			image
				width 200rpx
				height 200rpx
		
		
		
		
		
	
</style>
